import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import Echarts from '@kuiper-components/echarts';
import { percent } from '../../../../../common/formatter';
import Progress from '../../../../components/Progress';
import ChartTitle from '../../../../components/ChartTitle';
import EmptyPie from '../../../../components/empty/EmptyPie';
import { SECURITY_EVENT_TYPE_MAP } from '../../../../../common/constants';
import s from './style.module.css';
import Helper from '../../../../components/Helper';

const CHART_COLOR_MAP = {
	black_links: '#F04038',
	cryjack: '#FFA54E',
	malscan: '#83cbd9',
	broken_links: '#FF8D85',
	foreign_links: '#409EFF',
};
function EventStatistical({
	className,
	tasks,
	detectTime,
	result,
	prevResult,
}) {
	const { chartData, total } = React.useMemo(() => {
		let total = 0;
		const eventData = tasks.reduce(
			(obj, task) => {
				const warnings = task?.result?.warnings || [];
				warnings.forEach(w => {
					total++;
					const cate = w?.category;
					obj[cate]++;
				});
				return obj;
			},
			Object.keys(SECURITY_EVENT_TYPE_MAP).reduce((obj, s) => {
				obj[s] = 0;
				return obj;
			}, {})
		);

		const chartData = Object.entries(eventData)
			.map(([key, value]) => ({
				name: SECURITY_EVENT_TYPE_MAP[key],
				value,
				itemStyle: {
					color: CHART_COLOR_MAP[key],
				},
			}))
			.sort((a, b) => b.value - a.value);

		return { total, chartData };
	}, [detectTime, tasks]);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter({ name, percent, value }) {
				return `<div style="display:flex;backgroundColor:#F9F9F9;opacity: 0.8;padding:0.5rem">
									<div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
									<div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
									<div style="color: #2B2C32">(${percent}%)</div>
								</div>`;
			},
			backgroundColor: '#fff',
			textStyle: {
				color: '#696969',
				fontSize: 12,
			},
		},
		legend: {
			show: false,
			orient: 'vertical',
			right: 10,
			top: 20,
			icon: 'circle',
		},
		series: [
			{
				center: ['50%', '50%'],
				name: 'SSL漏洞等级占比',
				type: 'pie',
				radius: ['45%', '60%'],
				avoidLabelOverlap: false,
				hoverOffset: 5,
				data: chartData,
				label: {
					show: true,
					position: 'center',
					formatter: [`{normal|安全事件总数\n\n}`, `{highlight|${total}}`].join(
						''
					),
					color: '#696C78',
					fontWeight: 100,
					rich: {
						normal: {
							color: '#696C78',
							fontSize: 14,
						},
						highlight: {
							color: '#2B2C32',
							fontSize: 18,
						},
					},
				},
				emphasis: {
					label: {
						show: false,
						fontSize: 14,
					},
				},
				labelLine: {
					show: false,
				},
			},
		],
	};

	return (
		<div className={cn(className, s.eventStatistical)}>
			<div className={cn(s.pieChart, s.item)}>
				<ChartTitle>
					安全事件分布
					<Helper overlay="按风险URL统计" placement="top" />
				</ChartTitle>
				{total === 0 ? (
					<div className={s.emptyContainer}>
						<EmptyPie
							className={s.empty}
							textContent={
								<div className={s.emptyContent}>
									<div>安全事件总数</div>
									<div className={s.num}>0</div>
								</div>
							}
						/>
					</div>
				) : (
					<Echarts className={s.chart} option={option} />
				)}
			</div>
			<div className={cn(s.tableContainer, s.item)}>
				<ChartTitle>安全事件统计</ChartTitle>
				<div className={s.eventTableContainer}>
					<div className={s.tableWapper}>
						<table className={cn(s.table, 'tableFormat')}>
							<thead>
								<tr>
									<th className={s.name}>事件名称</th>
									<th>发现次数</th>
								</tr>
							</thead>
							<tbody>
								{chartData.map(({ name, value, itemStyle }) => (
									<tr key={name}>
										<td>{name}</td>
										<td>
											<div className={s.num}>
												<Progress
													className={s.progress}
													percent={percent(value / total)}
													fillColor={itemStyle.color}
												/>
												<div className={s.count}>{value}</div>
											</div>
										</td>
									</tr>
								))}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	);
}

EventStatistical.propTypes = {
	className: PropTypes.string,
	tasks: PropTypes.arrayOf(
		PropTypes.shape({
			_id: PropTypes.string,
			endTime: PropTypes.object,
			result: PropTypes.shape({
				warnings: PropTypes.shape({
					id: PropTypes.string,
				}),
			}),
		})
	),
	result: PropTypes.shape({
		target: PropTypes.string,
		result: PropTypes.shape({
			warningCount: PropTypes.number,
			warnings: PropTypes.shape({
				category: PropTypes.string,
				affects: PropTypes.string,
				detail: PropTypes.object,
			}),
		}),
	}),
	prevResult: PropTypes.shape({
		target: PropTypes.string,
		result: PropTypes.shape({
			warningCount: PropTypes.number,
			warnings: PropTypes.shape({
				category: PropTypes.string,
				affects: PropTypes.string,
				detail: PropTypes.object,
			}),
		}),
	}),
	detectTime: PropTypes.string,
};
EventStatistical.defaultProps = {
	className: '',
};

export default EventStatistical;
